<script lang="ts" setup>
function callPhoneNumber(tel) {
  uni.makePhoneCall({
    phoneNumber: tel,
  })
}
</script>

<template>
  <view>
    <view class="statement-box">
      <view class="statement-title">
        使用声明
      </view>
      <view class="statement-content">
        <view class="line-height-42rpx">
          <view>1、如投币异常，180秒内自动退款;</view>
          <view>2、如设备异常，请联系运营商家;</view>
          <view class="text-[#f30303] font-bold">
            3、如遇业务非法或业务不明，请停止支付;
          </view>
          <view class="text-[#f30303] font-bold">
            4、如支付即代表你知晓和同意当前商家服务;
          </view>
          <view>5、如对当前服务不满意请联系商家协调处理;</view>
          <view class="text-[#f30303] font-bold">
            6、恶意或非法投诉,将追究法律责任;
          </view>
        </view>
        <view class="title-box">
          <view class="t-title">
            【 设备客服 ( 经营商家 ) 】
          </view>
        </view>
        <view class="line-height-42rpx">
          <view>
            客服电话：<text class="text-[#008000] font-bold" @click="callPhoneNumber('18812345678')">
              188 1234 5678
            </text>
          </view>
          <view>
            客服微信：<text class="text-[#008000] font-bold">
              9961684
            </text>
          </view>
          <view class="flex flex-items-center">
            微信二维码：<wd-img :width="140" :height="160" src="https://wap.mch.yuntbq.com//upload/mch/mch888/place/f3d8a9fe17e75b96793636480b6ee43d.jpg" />
          </view>
        </view>
        <view class="title-box">
          <view class="t-title">
            【平台客服 ( 投诉/建议 ) 】
          </view>
        </view>
        <view class="line-height-42rpx">
          <view>
            客服电话：<text class="text-[#008000] font-bold" @click="callPhoneNumber('19128923056')">
              191 2892 3056
            </text>
          </view>
          <view class="text-[#969799]">
            权限提示: mch: 1 , sb: 1 , vip: 1 , openid: 1
          </view>
        </view>
      </view>
    </view>
    <view class="statement-btn">
      <wd-button custom-class="custom-shadow" block>
        主要按钮
      </wd-button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
:deep(){
  .custom-shadow {
    font-size: 28rpx !important;
      box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
      background-color: #07c160 !important;
    }
}
.statement-box {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  padding: 0 30rpx;
  box-sizing: border-box;
  padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);
}
.statement-title {
  width: 100%;
  height: 100rpx;
  color: #333;
  font-size: 32rpx;
  font-weight: bold;
  line-height: 100rpx;
  text-align: center;
}
.statement-content {
  height: 560rpx;
  overflow-y: auto;
  font-size: 28rpx;
  font-size: 24rpx;
  padding: 20rpx;
  border: 1px solid #ececec;
}
.title-box {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 30rpx;
  .t-title{
    display: inline-block;
    padding: 0 20rpx;
    background-color: #ffffff;
    position: relative;
    z-index: 1;
  }
  &::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    height: 1px;
    width: 100%;
    background-color: #b6b6b6;
  }
}
.statement-btn{
  width: 70%;
  position: fixed;
  bottom: env(safe-area-inset-bottom);
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
}
</style>
